import 'package:abc/controller/account_recovery_controller.dart';
import 'package:abc/view/CustomAppBar.dart';
import 'package:abc/view/GradientButton.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:qr_flutter/qr_flutter.dart';

class AccountRecoveryPage extends GetView<AccountRecoveryController> {
  const AccountRecoveryPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 确保Controller已注册
    if (!Get.isRegistered<AccountRecoveryController>()) {
      Get.lazyPut(() => AccountRecoveryController());
    }
    return DefaultTabController(
      length: 2, // 两个 Tab: 账号密码, 二维码凭证
      child: Scaffold(
        backgroundColor: const Color(0xFF0E0F26), // 深色背景
        body: Column(
          children: [
            CustomAppBar(
              title: "找回密码",
              onBack: () {
                Get.back();
              },
            ),
            _buildTabBar(), // TabBar
            // TabBarView (内容区域)
            const Expanded(
              child: TabBarView(
                children: [
                  _AccountPasswordView(), // 账号密码视图
                  _QRCodeRecoveryView(), // 二维码凭证视图
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTabBar() {
    const double indicatorTopPadding = 44.0;
    const double indicatorHorizontalPadding = 25.0;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 55.0),
      child: TabBar(
        dividerHeight: 0,
        indicatorPadding: const EdgeInsets.fromLTRB(
          indicatorHorizontalPadding,
          indicatorTopPadding,
          indicatorHorizontalPadding,
          0.0,
        ),

        // 自定义指示器样式：白色、圆角 11
        indicator: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(11.0),
        ),

        indicatorWeight: 4.0, // 指示线高度为 4
        indicatorSize: TabBarIndicatorSize.label,
        labelStyle: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        unselectedLabelStyle: const TextStyle(
          fontSize: 15,
          fontWeight: FontWeight.w500,
        ),
        labelColor: Colors.white,
        unselectedLabelColor: Color(0xFFEBEBEB),

        tabs: const [
          Tab(text: '账号密码'),
          Tab(text: '二维码凭证'),
        ],
      ),
    );
  }
}

// ----------------------------------------------------------------------
// 视图一：账号密码找回 (_AccountPasswordView)
// ----------------------------------------------------------------------
class _AccountPasswordView extends GetView<AccountRecoveryController> {
  const _AccountPasswordView();

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(15),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          _buildFormCard(),
          const SizedBox(height: 30),
          GradientButton(
            text: '确定',
            margin: EdgeInsets.all(0),
            onPressed: controller.submitAccountPasswordForm,
          ),
        ],
      ),
    );
  }

  Widget _buildFormCard() {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0x33959595),
        borderRadius: BorderRadius.circular(10),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Column(
          children: [
            _buildInputItem('账号', '请输入账号', controller: controller.accountController),
            _buildInputItem('密码', '请输入密码', isPassword: true, controller: controller.passwordController),
          ],
        ),
      ),
    );
  }

  Widget _buildInputItem(String label, String hint, {bool isPassword = false, TextEditingController? controller}) {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 4.0),
          child: Row(
            children: [
              SizedBox(
                width: 70,
                child: Text(
                  label,
                  style: const TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
              Expanded(
                child: TextField(
                  controller: controller,
                  obscureText: isPassword,
                  style: const TextStyle(color: Colors.white),
                  decoration: InputDecoration(
                    hintText: hint,
                    hintStyle: TextStyle(
                      color: Colors.white.withOpacity(0.5),
                      fontSize: 15,
                    ),
                    border: InputBorder.none,
                    contentPadding: const EdgeInsets.symmetric(vertical: 15),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

// ----------------------------------------------------------------------
// 4. 视图二：二维码凭证找回 (_QRCodeRecoveryView)
// ----------------------------------------------------------------------
class _QRCodeRecoveryView extends GetView<AccountRecoveryController> {
  const _QRCodeRecoveryView();

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(15),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          _buildUploadArea(),
          const SizedBox(height: 30),
          GradientButton(
            text: '确定',
            margin: EdgeInsets.all(0),
            onPressed: () {},
          ),
        ],
      ),
    );
  }

  Widget _buildUploadArea() {
    return Container(
      height: 250,
      decoration: BoxDecoration(
        color: const Color(0x33959595),
        borderRadius: BorderRadius.circular(10),
      ),
      child:   Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                '请上传身份凭证二维码',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 14,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 27),
              Image.asset(
                'assets/images/ic_qr_card.png',
                width: 116,
                height: 116,
              ),
            ],
          )
      
    );
  }
}

// ----------------------------------------------------------------------
// 5. 通用底部按钮 (沿用深色主题的渐变按钮样式)
// ----------------------------------------------------------------------
Widget _buildBottomButton(String text) {
  return Positioned(
    left: 0,
    right: 0,
    bottom: 0,
    child: Container(
      color: const Color(0xFF0E0F26),
      padding: const EdgeInsets.fromLTRB(15, 12, 15, 30),
      child: SizedBox(
        width: double.infinity,
        height: 50,
        child: Container(
          // 渐变背景
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10.0),
            gradient: const LinearGradient(
              colors: [Color(0xFFA877F4), Color(0xFF5650D6)],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
          ),
          child: ElevatedButton(
            onPressed: () {
              // 提交找回逻辑
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.transparent,
              shadowColor: Colors.transparent,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
            ),
            child: Text(
              text,
              style: const TextStyle(fontSize: 18, color: Colors.white),
            ),
          ),
        ),
      ),
    ),
  );
}
